<template>
  <div>
    <div style="margin: 20px 0px">

<!--      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">-->
<!--        <el-form-item label="用户名称" prop="userName">-->
<!--          <el-input-->
<!--            v-model="queryParams.userName"-->
<!--            placeholder="请输入用户名称"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="手机号码" prop="phonenumber">-->
<!--          <el-input-->
<!--            v-model="queryParams.phonenumber"-->
<!--            placeholder="请输入手机号码"-->
<!--            clearable-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      -->
 <!-- input -->
 <el-input
  placeholder="请输入内容"
  v-model="keyword"
  clearable
  style="width: 20%"
 >
 </el-input>

 <!-- 按钮 -->
 <el-button type="primary" @click="queryPage">搜索</el-button>
  <el-button @click="queryPage">重置</el-button>
 <!-- 新增按钮 -->
 <el-button type="success" @click="showAddDialog">新增</el-button>
</div>
      <el-table v-fit-columns :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编码"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="phone" label="手机号码"> </el-table-column>
        <el-table-column prop="password" label="密码"> </el-table-column>
        <el-table-column prop="image" label="头像" align="center">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.image" shape="square" :size="80" fit="fill" ></el-avatar>
<!--            <img :src="scope.row.image" style="width: 80px; height: 80px;" />-->
          </template>
        </el-table-column>
        <el-table-column prop="role" label="角色">
          <!-- scope表示为作用域  scope.row表示为作用域中这一行的数据 -->
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.role == 0">管理员</el-tag>
            <el-tag type="warning" v-if="scope.row.role == 1">用户</el-tag>
            <el-tag type="danger" v-if="scope.row.role == 2">医护</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" ></el-table-column>
        <el-table-column label="操作" width="150">
          <el-button size="mini" @click="handleEdit(scope.row)" >编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </el-table-column>
      </el-table>
    <!-- 定义一个分页标签 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
      :page-sizes="[4, 10, 20, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 定义一个对话框 -->
    <el-dialog
      title="新增对话框"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <!-- action表示为上传文件的url   -->
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8088/vaccinum/file/upload/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.role" placeholder="请选择">
            <el-option
              v-for="item in role_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="insert">提 交</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="编辑对话框"
      :visible.sync="dialogVisible_edit"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <!-- action表示为上传文件的url   -->
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8088/vaccinum/file/upload/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.role" placeholder="请选择">
            <el-option
              v-for="item in role_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_edit = false">取 消</el-button>
        <el-button type="primary" @click="save">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

//导入request工具
import request from "@/utils/request";
export default {
  data() {
    return {
      tableData: [],
      options: [],
      sex_options: [
        { id: "男", name: "男" },
        { id: "女", name: "女" },
      ],
      role_options: [
        { id: 0, name: "管理员" },
        { id: 1, name: "用户" },
        { id: 2, name: "医护" },
      ],
      form: {
        id: "",
        username: "",
        phone: "",
        password: "",
        role: "",
        status: ""
        // code: "",
        // email: "",
        // sex: "",
        // age: "",
        // job: "",
      },
      dialogVisible: false,
      dialogVisible_edit: false,
      total: 0,
      pageNum: 1, //当前页码
      pageSize: 10, //当前数量
      keyword: "",
      imageUrl: "",
      loading: false,
    };
  },
  created() {
    this.queryPage();
    this.queryAll();
  },
  methods: {
      // 查询所有的疫苗的分类信息
    queryAll() {
      request
        .get("/user/queryAll", {
          params: {},
        })
        .then((res) => {
          console.log(res);
          this.options = res.list;
        });

    },
    queryPage() {
    request.get("/user/list", {
      params: {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        keyword: this.keyword,
      },
    }).then((res) => {
      console.log(res);
      // 把后台的响应的数据赋值给data中的tableData
      this.tableData = res.list;
      this.total = res.total;
    });
  },
  showAddDialog(){
    this.form = {};
    this.dialogVisible = true;

  },

  insert(){
    request
        // post 请求方式    提交的数据
        .post("/user/insert", this.form)
        // then表示请求后的回调函数
        .then((res) => {
          //判断操作是否成功
          if (res.ok == true) {
            //重新查询数据
            this.queryPage();
            //消息提示
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.form = {};
            //关闭对话框
            this.dialogVisible = false;
          } else {
            this.$message.error("新增失败");
          }
        });
  },
  // 插入数据
  save(){
    // if(this.form.id == ""){
    //     request
    //     // post 请求方式    提交的数据
    //     .post("/user/insert", this.form)
    //     // then表示请求后的回调函数
    //     .then((res) => {
    //       //判断操作是否成功
    //       if (res.ok == true) {
    //         //重新查询数据
    //         this.queryPage();

    //         //消息提示
    //         this.$message({
    //           message: "新增成功",
    //           type: "success",
    //         });
    //         this.form = {};
    //         //关闭对话框
    //         this.dialogVisible = false;
    //       } else {
    //         this.$message.error("新增失败");
    //       }
    //     });
    //     }else{
    //       request
    //     // post 请求方式    提交的数据
    //     .post("/user/update", this.form)
    //     // then表示请求后的回调函数
    //     .then((res) => {
    //       //判断操作是否成功
    //       if (res.ok == true) {
    //         //重新查询数据
    //         this.queryPage();
    //         //消息提示
    //         this.$message({
    //           message: "更新成功",
    //           type: "success",
    //         });
    //         this.form = { };
    //         //关闭对话框
    //         this.dialogVisible_edit = false;
    //       } else {
    //         this.$message.error("更新失败");
    //       }
    //     });
    //   }
      request
        // post 请求方式    提交的数据
        .post("/user/update", this.form)
        // then表示请求后的回调函数
        .then((res) => {
          //判断操作是否成功
          if (res.ok == true) {
            //重新查询数据
            this.queryPage();
            //消息提示
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.form = { };
            //关闭对话框
            this.dialogVisible_edit = false;
          } else {
            this.$message.error("更新失败");
          }
        });
   },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
     // 更改每页的记录数
     handleSizeChange(val) {
    // 更新数据
    this.pageSize = val;
    // 查询
    this.queryPage();
    console.log(`Size每页 ${val} 条`);
  },
  // 更改页码（当前页）
  handleCurrentChange(val) {
    // 更新数据
    this.pageNum = val;
    // 查询
    this.queryPage();
    console.log(`Current当前页: ${val}`);
  },
    // 对话框关闭前的弹窗
    handleClose(done) {
    this.$confirm("确认关闭？")
      .then((_) => {
        done();
      })
      .catch((_) => { });
  },

  handleEdit(row) {
    console.log(row);
    // if(this.form.id = ''){
    //   this.form.id = row.id
    //   this.form.name = row.name
    //   this.form.phone = row.phone
    //   this.form.password = row.password
    //   this.form.role = row.role
    //   this.dialogVisible = true
    // }else{
      this.form.id = row.id
      this.form.username = row.username
      this.form.phone = row.phone
      this.form.password = row.password
      this.form.role = row.role
      this.form.image = row.image
      this.dialogVisible_edit = true
    // }
  },
  handleDelete(row) {
    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        console.log(row.username);
        // 调用删除接口
        request.get("/user/delete",{
          params: {
            id: row.id
          }
          }).then((res)=>{
            // 判断是否删除成功
          if(res.ok == true){
            this.queryPage();
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          }else{
            this.$message({
            type: 'info',
            message: '删除失败'
          });
          }
          })
      }).catch((res) => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    console.log(row.id);
  },
   //成功后的处理函数
   handleAvatarSuccess(res, file) {
      console.log("file==="+file);
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.image = res

    },
    //上传之前的处理函数
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      console.log("isJPG==="+((isJPG||isPNG) && isLt2M ));
      return (isJPG||isPNG) && isLt2M;
    },

  },



};

</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
